<% var headContent = { %>
<script type="text/javascript" src="${base}/template/admin/js/utils.js" charset="UTF-8"></script>
<style>

/*验证：提示信息样式 begin*/
.am-alert-danger {
    background-color: transparent;
    border-color: transparent;
    color: red;
}

.am-alert {
    margin-bottom: 1em;
    padding: .625em;
    background: transparent;
    border: none;
    border-radius: 0;
}
/*验证：提示信息样式 end*/
</style>
<%};%> <%layout("/common/_layout.html",{head:headContent}){%>
<form method="post" class="am-form" id="valueForm"
    action="${base}/sysCodeValue/save">
    <!--选项卡（tabs）begin-->
    <div class="am-tabs am-margin" data-am-tabs>
        <ul class="am-tabs-nav am-nav am-nav-tabs">
            <li class="am-active"><a href="#tab1">基础数据配置（小类）</a></li>
        </ul>
        <div class="am-tabs-bd">
            <div class="am-tab-panel am-fade am-in am-active" id="tab1">
            <input name="codeValueID" id="codeValueID" type="hidden"
                    value="${codeValueID!}" /> 
                <!--验证表单元素（validate) begin-->
                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                        <span style="color: red;">*</span>大类名称
                    </div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <select data-am-selected="{maxHeight: 260,searchBox: 1}" id="tid" name="tid" data-validation-message="请选择大类"  required>
                        <option value="0" <%if(tid! == "0") {%>selected<%}%>>请选择</option>
                        <%for(list in typelist!){%>
                  		<option value="${list.id}"
                  		<%if (!isEmpty(tid)&&parseInt(tid) == list.id){%>
                  		 selected = "selected"
                  		<%}%>
                  		>${list.name}
                  		</option>
                  		<%}%> 
                   </select>
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg">
                    <div class="am-alert am-alert-danger">${sysCodeValueTypeNameMessages!}</div>
                    </div>
                </div>
                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                        <span style="color: red;">*</span>名称
                    </div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input name="valueName" class="js-ajax-validate"
                            data-validate-async data-validation-message="请输入资源名称（60字符以内）"
                            type="text" id="valueName" value="${valueName!}" minlength="1"
                            maxlength="60" placeholder="请输入资源名称（60字符以内）" required />
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg">
                    </div>
                </div>

                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right">值</div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="text" class="am-input" data-validate-async data-validation-message="请输入Value（1000字符以内）" 
                        name="valueValue" placeholder="请输入Value（1000字符以内）" maxlength="1000"
                            value="${valueValue!}" />
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>
                
                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right"><span style="color: red;">*</span>编码</div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="text" class="am-input" data-validate-async data-validation-message="请输入编码（60字符以内）" 
                        name="valueCode" placeholder="请输入编码（60字符以内）" maxlength="60"
                            value="${valueCode!}" 
                             <%if(codeValueID! == -1){%><%}else{%>readonly="readonly"<%}%> required />
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg">
            		</div>
                </div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">是否启用</div>
					<div class="am-u-sm-12 am-u-md-4 switch-button">
						<input id="switch" name="switch" type="checkbox" data-size='xs'
							data-am-switch data-off-text="否" data-on-text="是"<%if
						(is_deleted! == null || is_deleted! == false){%> checked <%}%> > <input
							type="hidden" class="am-input-sm" name="is_deleted" id="is_deleted"
							value="${is_deleted!0}" />
					</div>
					<div class="am-hide-sm-only am-u-md-1" style="color: red;"></div>
					<div class="am-u-sm-2 am-u-md-5 input-msg"></div>
				</div>
				
                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right"><span style="color: red;">*</span>排序</div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="text" class="am-input js-pattern-sort" name="valueSort"  data-validation-message="排序不能为空且只能是纯数字" placeholder="请输入纯数字,越小越向前" maxlength="11" required
                            value="${valueSort!5}" />
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>

                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right">备注</div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="text" class="am-input" data-validate-async data-validation-message="请输入备注信息（1000字符以内）" 
                        name="valueRemark" placeholder="请输入备注信息（1000字符以内）" maxlength="1000"
                            value='${valueRemark!}' />
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>
                                
            </div>
            <!--验证表单元素（validate end-->
        </div>
    </div>
    </div>
    <!--选项卡（tabs）end-->
    <div class="am-margin">
        <button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
        <button type="button" class="am-btn am-btn-warning am-btn-xs"
            onclick="javascript:history.go(-1);">返回上一级</button>
    </div>
</form>
<script type="text/javascript">

    $(function(){
    var $mycheckbox = $('.switch-button');
	$mycheckbox.each(function() {
		$("#switch").on({
			'switchChange.bootstrapSwitch' : function(event, state) {
				if (state.toString() == "true") {
					$("#is_deleted").val("0");
				} else {
					$("#is_deleted").val("1");
				}
			}
		});
	});
	
    /*表单验证：begin*/
    //自定义规则，用法：验证元素上加class="js-pattern-sort"
    if ($.AMUI && $.AMUI.validator) {
      $.AMUI.validator.patterns.sort = /^([0-9]+)$/;
    }
    $("#valueForm").validator({
      // 域通过验证时回调
      onValid: function(validity) {
        $(validity.field).closest('.am-form-group').find('.am-alert').hide();
      },
      // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
      onInValid: function(validity) {
        var $field = $(validity.field);
        var $group = $field.closest('.am-form-group');
        var $alert = $group.find('.am-alert');
        // 使用自定义的提示信息 或 插件内置的提示信息
        var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

        if (!$alert.length) {
          $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
          appendTo($group.find(".input-msg"));
        }
        console.log("onInValid : "+$field.val());
        $alert.html(msg).show();
      },
      //自定义验证
    validate: function (validity) {
      if ($(validity.field).is('#tid')) {
        var name = $("#tid").val().trim();
        if(name < 1){
          validity.valid = false;
        }
      };


    }
    });
    /*表单验证：end*/
    
});
</script>
<%}%>
